import React, {useEffect} from 'react';
import {observer} from 'mobx-react';
import {Splitter} from "antd";
import Category from './category';
import Table from './Table';
import Form from './Form';
import Log from './Log';
import store from './store';

export default observer(function () {
  useEffect(() => {
    store.fetchRecords()
    store.fetchCategories()
  }, [])

  return (
    <React.Fragment>
      <Splitter style={{height: '100%',}}>
        <Splitter.Panel collapsible defaultSize={220} min={180} max={300}>
          <Category/>
        </Splitter.Panel>
        <Splitter.Panel>
          <div style={{paddingLeft: 6}}>
            <Table/>
          </div>
        </Splitter.Panel>
      </Splitter>
      {store.formVisible && <Form/>}
      {store.logVisible && <Log/>}
    </React.Fragment>
  )
})